<script setup lang='ts'>
import { ref } from 'vue';
import {useUserStore} from '@/stores/users'

//导入路由
import {useRouter} from 'vue-router'
//使用路由
const router = useRouter();

let userStore = useUserStore();
//定义两个变量 设置两个默认值
const loginname = ref('17674508801');
const password = ref('123456');

//点击提交按钮的时候,触发submit事件
/* 
    form 表单 可以自动收集表单当中的v-model的数据
*/
const onSubmit = async (values:{loginname:string,password:string}) => {
    //调用 pinia 里面的login方法
    try{
        const result = await userStore.loginHandler(values)
        //跳转到主页
        router.push("/")
    }catch{
        
    }
};

//编写正则,用于校验账号和密码
const pattern = /^[\w,!]{6,15}$/

</script>
<template>
    <div>
        <van-nav-bar title="晨锋电商" left-text="返回" left-arrow @click-left="$router.go(-1)" />

        <van-form @submit="onSubmit" validate-trigger="onChange">
            <van-cell-group inset>
                <van-field v-model="loginname" name="loginname" label="用户名" placeholder="请输入用户名" 
                :rules="[{ required: true, message: '请填写用户名' },{ pattern, message: '输入的用户范围在6~15位之间' }]"/>
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码s"
                :rules="[{ required: true, message: '请填写密码' },{ pattern, message: '输入的用户范围在6~15位之间' }]"/>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>

        <van-form>
            <van-cell-group title="去注册">
                <van-cell title="快速注册" is-link url="/register"/>
            </van-cell-group>
        </van-form>
    </div>
</template>
<style scoped>
.van-form{
    margin-top:60px;
}
</style>